<template>
  <div>
    <van-nav-bar class="head" title="零食榜单" left-text=""  />
    <van-grid>
      <van-grid-item  v-for="(item,index) in list" :key="index">
        <div class="pic">
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi1%2F725677994%2FTB2P3WtXrZnBKNjSZFrXXaRLFXa_%21%21725677994.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642832057&t=f94726f0aa95ca784a76edf45016503f" alt="" width="100%" />
        </div>
        <p>{{item.title}}</p>
        <span
          >{{item.content}}</span
        >
      </van-grid-item>
    </van-grid>
    <van-button type="primary" block class="button" to="NPSlist">我要助力</van-button>
  </div>
</template>
<script> 
export default {
  data() {
    return {
      list: [
         {
         title :"2019零食排名由你决定",
            src:"",
            content:"零食其实也是快速消费品的一类，是在人们闲暇、休息时所吃的食品。最贴切的解释是吃着玩的食品．主要分类有：酸角糕，干果，膨化食品，糖果，肉制品等．随着生活水平的提高，休闲食品一直深受广大人民群众喜爱的食品。......",
           
         }
      ],
    };
  },
};
</script>
<style scoped lang="less">
.head {
  width: 100%;
  height: 51px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(239, 239, 239, 1);
  top: 0;
}
/deep/.van-nav-bar .van-icon{
  color: rgba(153, 153, 153, 1);
}
/deep/.van-nav-bar__title{
  color: rgba(42, 131, 78, 1);
  font-size: 18px;
}
.van-grid {
  width: 358px;
  height: 100%;
  .van-grid-item {
    width: 358px;
    height: 290px;
    color: rgba(250, 250, 250, 1);
    background-color: rgba(250, 250, 250, 1);
    font-size: 16px;
    line-height: 150%;
    margin-top: 10px;
    margin-left: 8px;
    .pic {
      width: 358px;
      height: 184px;
      overflow: hidden;
    }
    p {
      position: absolute;
      left: 17px;
      top: 107px;
      color: rgba(255, 255, 255, 1);
      text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 2px;
      font-size: 23px;
    }
    span {
      width: 324px;
      height: 74px;
      left: 28px;
      top: 261px;
      color: rgba(0, 0, 0, 0.8700000048);
      font-size: 13px;
      line-height: 170%;
      text-align: left;
      padding: 20px;
    }
  }
}
.button {
  width: 179px;
  height: 32px;
  margin-left: 100px;
  background-color: rgba(42, 131, 78, 1);
  border-radius: 10px;
}
</style>
